<template>
  <div class="abstract-reading">
    <!-- 左侧对话列表 -->
    <div class="audio-data-area">
      <el-header class="elHeader">
        <el-button type="primary" @click="dialogVisible = true">新建对话</el-button>
        <div class="imgSearch">
          <img src="@/assets/images/search.png" alt="" />
        </div>
      </el-header>

      <!-- 新增对话列表 -->
      <div class="conversation-list">
        <h3 class="list-item">最近7天</h3>
        <ul>
          <li
            v-for="(item, index) in recentConversations"
            :key="index"
            class="list-item-li"
          >
            {{ item }}
          </li>
        </ul>
        <h3 class="list-item">最近30天</h3>
        <ul>
          <li
            v-for="(item, index) in recentConversations30Days"
            :key="index + '30'"
            class="list-item-li"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 右侧内容区域 -->
    <el-container>
      <el-main style="background-color: #061428; color: #fff">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
          "
        >
          <div class="image-container">
            <img src="@/assets/images/wenzhai.png" alt="" class="image-bottom" />
            <img src="@/assets/images/tuoyuan.png" alt="" class="image-top" />
          </div>
          <span style="margin-top: 75px; font-size: 24px">文摘智阅</span>
        </div>

        <div class="horizontal-chart-area">
          <div
            class="horizontal-chart-item"
            v-for="(chart, index) in chartsData"
            :key="index"
          >
            <div
              class="horizontal-cylinder-chart"
              :style="{ width: `${chart.percentage * 2}%` }"
            >
              <div class="horizontal-cylinder-value">{{ chart.value }}个</div>
            </div>
            <p>{{ chart.title }}</p>
          </div>
        </div>
      </el-main>
      <div class="input-area">
        <el-input
          v-model="newMessage"
          placeholder="请输入消息..."
          @keyup.enter.native="sendMessage"
          @click.stop="toggleVoiceInput"
          style="width: 85%"
        ></el-input>
        <!-- 发送按钮放在语音输入按钮后面 -->
        <div class="btns">
          <img src="@/assets/images/audio2x.png" alt="" @click="toggleVoiceInput" />
          <img src="@/assets/images/send2x.png" alt="" @click="sendMessage" />
        </div>
      </div>
      <div class="btnsong">
        <img src="@/assets/images/shangchuan.png" alt="" />
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newMessage: "",
      dialogVisible: false,
      inputValue: "",
      // 新增对话数据
      recentConversations: [
        "新建对话XXXXXXXXXX",
        "新建对话XXXXXXXXXX",
        "新建对话XXXXXXXXXX",
        "新建对话XXXXXXXXXX",
      ],
      recentConversations30Days: [
        "新建对话XXXXXXXXXX",
        "新建对话XXXXXXXXXX",
        "新建对话XXXXXXXXXX",
        "新建对话XXXXXXXXXX",
      ],
      chartsData: [
        { title: "阅读总结", value: 26, percentage: 50 },
        { title: "PDF识别", value: 51, percentage: 70 },
        { title: "文档翻译", value: 70, percentage: 80 },
      ],
    };
  },
  methods: {
    echartsInit() {
      // 示例：初始化echarts图表
      // const myChart = echarts.init(document.getElementById('chart'));
      // myChart.setOption({
      //   // echarts图表配置
      // });
      let getData = [
        { name: "A+", value: 75.17 },
        { name: "A", value: 48.35 },
        { name: "B", value: 95.36 },
        { name: "C", value: 58.35 },
        { name: "D", value: 28.35 },
      ];
      let xAxisData = [],
        seriesData1 = [],
        sum = 0,
        maxData = [];
      let newObj = [],
        newObj2 = [],
        newObjDat = [];

      let barTopColor = ["#2efdfb", "#308cff", "#23b467", "#6c52da", "#a05bee"];
      let barBottomColor = [
        "rgba(46,253,251,0.1)",
        "rgba(48, 140, 255, 0.1)",
        "rgba(35, 180, 103, 0.1)",
        "rgba(108, 82, 218, 0.1)",
        "rgba(160, 91, 238, 0.1)",
      ];
      getData.forEach((item, index) => {
        xAxisData.push(item.name);
        seriesData1.push(item.value);
        sum += item.value;

        newObjDat.push("");
        newObjDat[index] = seriesData1[index];
        newObj.push({
          name: item.name,
          value: item.value,
          trueVal: item.value,
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: barTopColor[index],
              borderType: "dashed",
              borderWidth: 10,
            },
          },
        });
        newObj2.push({
          name: item.name,
          value: item.value,
          trueVal: item.value,
          itemStyle: {
            normal: {
              color: "transparent",
              borderColor: barTopColor[index],
              borderWidth: 50,
            },
          },
        });
      });

      let max = Math.max.apply(null, seriesData1);
      seriesData1.forEach((item) => {
        maxData.push(Number(max) + 10);
      });
      // console.log(max,maxData)

      option = {
        backgroundColor: "#000",
        title: {
          text: "",
          top: 20,
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 20,
          },
        },
        grid: {
          top: "0%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true, //包括文本，居中
        },
        xAxis: {
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 25,
            interval: 0,
            align: "center",
            formatter: function (params, index) {
              return "{b|" + params + "}";
            },
            textStyle: {
              fontSize: 14,
              color: "#ffffff",
              rich: {
                a: {
                  fontSize: 14,
                  color: "#ffffff",
                },
                b: {
                  height: 20,
                  fontSize: 14,
                  color: "#ffffff",
                },
              },
            },
          },
          interval: 0,
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "柱顶部",
            type: "pictorialBar",
            symbolSize: ["40%", 10],
            symbolOffset: [-5, -5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              normal: {
                show: true,
                position: "top",
                color: "#fff",
                formatter: "{c}%",
              },
              fontSize: 14,
            },
            symbolPosition: "end",
            data: seriesData1,
          },
          {
            name: "柱底部",
            type: "pictorialBar",
            symbolSize: ["40%", 10],
            symbolOffset: [-3, 5],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            data: seriesData1,
          },
          {
            name: "柱顶部",
            type: "pictorialBar",
            symbolSize: ["55%", 10],
            symbolOffset: [-3, -2],
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  let clos = barBottomColor[params.dataIndex].split(",");
                  return `${clos[0]},${clos[1]},${clos[2]},0.35)`;
                },
              },
            },
            label: {
              show: false,
            },
            symbolPosition: "end",
            data: maxData,
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [68, 25],
            symbolOffset: [-4, 20],
            z: 10,
            barMinHeight: 1,
            data: [...newObj],
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [47, 16],
            symbolOffset: [-5, 26],
            z: 10,
            barMinHeight: 1,
            data: [...newObj2],
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: barTopColor[params.dataIndex] },
                    { offset: 0, color: barBottomColor[params.dataIndex] },
                  ]);
                },
                opacity: 0.8,
              },
            },
            z: 18,
            // silent: true,
            barWidth: "35%",
            barGap: "0%",
            data: seriesData1,
          },
          {
            name: "底色",
            type: "bar",
            barWidth: "50%",
            z: 0,
            barGap: "-120%",
            // stack: '',
            symbolPosition: "end",
            itemStyle: {
              normal: {
                color: function (params) {
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: barTopColor[params.dataIndex] },
                    { offset: 0, color: barBottomColor[params.dataIndex] },
                  ]);
                },
                opacity: 0.3,
              },
            },
            data: maxData,
          },
        ],
      };
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.newMessage = ""; // 清空输入框
      }
    },
    toggleVoiceInput() {
      console.log("Toggle voice input");
    },
  },
};
</script>

<style scoped lang="less">
.el-button--primary {
  background-color: #28608c;
  border-color: #2293d0 !important;
  width: 240px;
  letter-spacing: 3px;
  border-width: 2px;
}
.abstract-reading {
  display: flex;
  height: 100vh;

  .el-aside {
    background-color: #061428;
    color: #fff;
    text-align: left;
    line-height: 200px;
  }

  .el-main {
    background-color: #061428;
    color: #fff;
    text-align: center;
    line-height: 160px;
  }

  .el-header {
    background-color: #061428;
    color: #fff;
    text-align: center;
    line-height: 60px;
    position: fixed;
    left: 10px;
  }

  .chart-area {
    background-color: #061428;
    color: #fff;
    text-align: center;
    padding: 20px;

    .chart-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 20px;

      p {
        font-size: 18px;
        margin: 5px 0;
      }

      span {
        font-size: 14px;
      }

      .cylinder-chart {
        position: relative;
        width: 80px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        overflow: hidden;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #409eff;
          border-radius: 10px;
        }

        .cylinder-value {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          color: #fff;
          font-size: 14px;
          z-index: 1;
        }
      }
    }
  }

  // 新增样式以支持横向柱状图
  .horizontal-chart-area {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px;
    background-color: #061428;
    color: #00bfee;

    .horizontal-chart-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 20px;

      p {
        font-size: 18px;
        margin: 5px 0;
      }

      .horizontal-cylinder-chart {
        position: relative;
        width: 100px;
        height: 150px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

        &::before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #409eff;
          border-radius: 10px;
          opacity: 0.8;
        }

        .horizontal-cylinder-value {
          position: absolute;
          bottom: 10px;
          left: 50%;
          transform: translateX(-50%);
          color: #fff;
          font-size: 14px;
          z-index: 1;
        }

        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #2496d5;
          border-radius: 10px;
          opacity: 0.5;
        }
      }
    }
  }
}
.audio-data-area {
  //display: none;
  width: 25%;
  background-color: #061428;
  color: white;
  padding: 20px;
  box-sizing: border-box;
  border-right: 1px solid #096391;

  .conversation-list {
    margin-top: 90px;
    ul {
      list-style-type: none;
      padding: 0;
    }
  }
}

.input-area {
  position: fixed;
  bottom: 20px;
  right: 24%; /* 根据左侧区域宽度调整 */
  width: 26%;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #096391;
  height: 50px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btns {
    width: 15%;
    cursor: pointer;
    img {
      margin-right: 10px;
    }
  }
  /deep/ .el-input__inner {
    background: none;
    color: #fff;
    border: none;
  }
}
.image-container {
  position: relative;
  //width: 300px; /* 根据需要调整宽度 */
  height: 300px; /* 根据需要调整高度 */
  left: -40px;
}

.image-bottom {
  //width: 100%;
  //height: 100%;
  position: absolute;
  top: 52px;
  left: 62px;
  z-index: 99;
}

.image-top {
  //width: 100%;
  //height: 100%;
  position: absolute;
  top: 20px;
  left: 17px;
  opacity: 1; /* 可选：设置透明度 */
}

.caption {
  display: block;
  text-align: center;
  margin-top: 10px;
}
.btnsong {
  position: fixed;
  bottom: 4px;
  right: 19%;
}
.imgSearch {
  position: fixed;
  left: 315px;
  top: 22px;
}
.elHeader {
  text-align: left;
  font-size: 12px;
  background-color: #28608c;
  color: #fff;
  border-radius: 10px;
  width: 270px;
}
.list-item {
  color: #3b89c4;
  margin: 10px 11px;
  letter-spacing: 3px;
  font-size: 14px;
}
.list-item-li {
  padding: 10px;
  margin-bottom: 5px;
  color: white;
  letter-spacing: 3px;
}
</style>
